<template>
  <view class="container">
    <u-sticky offset-top="0">
      <view class="fill-base rel p-t-30">
        <text class="iconfont font-22 m-l-10 wenab" style="color: #a4a9b7" @click="goTo()">&#xe72d;</text>
        <u-tabs
          :list="orderTabList"
          lineWidth="30"
          lineColor="#FF8F33"
          @click="clickTab"
          :activeStyle="{
            color: '#FF8F33',
            fontSize: '28rpx',
            fontWeight: 'bold',
          }"
          :scrollable="false"
          :inactiveStyle="{
            fontSize: '28rpx',
            color: '#788096',
          }"
        >
        </u-tabs>
      </view>
      <view class="fill-base p-t-10 p-b-10">
        <u-tabs
          :list="cateList"
          lineWidth="0"
          lineColor="#FF8F33"
          @click="clickCateTab"
          :activeStyle="{
            color: '#fff',
            background: '#00D075',
            padding: '6rpx 34rpx',
            borderRadius: '50rpx',
            fontSize: '24rpx',
          }"
          :inactiveStyle="{
            color: '#788096',
            background: '#F7F7F7',
            padding: '6rpx 34rpx',
            borderRadius: '50rpx',
            fontSize: '24rpx',
          }"
          :scrollable="false"
          itemStyle="padding-left: 0;"
        >
        </u-tabs>
      </view>
    </u-sticky>
    <view v-if="orderTabIndex == 0">
      <view class="record" v-for="(item, index) in list" :key="index" v-if="cateTabIndex == 1">
        <view class="font-26 c-9c p-b-10 m-b-10 border-bottom">交易单号 {{ item.sn }}</view>
        <view class="flex-y-center p-b-20 m-b-20 border-bottom">
          <image :src="$util.img('image/sanqi/balance1.png')" mode="" class="img" lazy-load></image>
          <view class="" style="width: 71%">
            <view class=""> 余额消费 </view>
            <view class="c-8d">
              <text>{{ item.datetime }}</text>
            </view>
          </view>
          <view class="text-bold c-origin m-l-auto">{{ item.totalAmount || 0 }}</view>
        </view>
        <view class="flex-x-between p-t-10">
          <view class="c-77">备注</view>
          <view>{{ item.remark }}</view>
        </view>
      </view>
      <view class="record" v-for="(item, index) in list" :key="index" v-if="cateTabIndex == 0">
        <view class="font-26 c-9c p-b-10 m-b-10 border-bottom">交易单号 </view>
        <view class="flex-y-center p-b-20 m-b-20 border-bottom">
          <image :src="$util.img('image/sanqi/balance1.png')" mode="" class="img" lazy-load></image>
          <view class="" style="width: 71%">
            <view class=""> 余额消费 </view>
            <view class="c-8d">
              <text>{{ $util.timeStampTurnTime(item.create_time) }}</text>
            </view>
          </view>
          <view class="text-bold c-origin m-l-auto">{{ item.account_data || 0 }}</view>
        </view>
        <view class="flex-x-between p-t-10">
          <view class="c-77">备注</view>
          <view>{{ item.remark }}</view>
        </view>
      </view>
    </view>
    <view v-if="orderTabIndex == 1">
      <view class="record" v-if="cateTabIndex == 1" v-for="(item, index) in list" :key="index">
        <view class="font-26 c-9c p-b-10 m-b-10 border-bottom">交易单号 {{ item.cashierUid }}</view>
        <view class="flex-y-center p-b-20 m-b-20 border-bottom">
          <image :src="$util.img('image/sanqi/balance2.png')" mode="" class="img" lazy-load></image>
          <view class="" style="width: 71%">
            <view class=""> {{ item.payMethod }} </view>
            <view class="c-8d">
              <text>{{ item.datetime }}</text>
            </view>
          </view>
          <view class="text-bold m-l-auto" style="color: #00d075">+{{ item.rechargeMoney || 0 }}</view>
        </view>
        <view class="flex-x-between p-t-10">
          <view class="c-77">备注</view>
          <view>{{ item.remark }}</view>
        </view>
      </view>
      <view class="record" v-if="cateTabIndex == 0" v-for="(item, index) in list" :key="index">
        <view class="font-26 c-9c p-b-10 m-b-10 border-bottom">交易单号 </view>
        <view class="flex-y-center p-b-20 m-b-20 border-bottom">
          <image :src="$util.img('image/sanqi/balance2.png')" mode="" class="img" lazy-load></image>
          <view class="" style="width: 71%">
            <view class=""> {{ item.type_name }} </view>
            <view class="c-8d">
              <text>{{ $util.timeStampTurnTime(item.create_time) }}</text>
            </view>
          </view>
          <view class="text-bold m-l-auto" style="color: #00d075">+{{ item.account_data || 0 }}</view>
        </view>
        <view class="flex-x-between p-t-10">
          <view class="c-77">备注</view>
          <view>{{ item.remark }}</view>
        </view>
      </view>
    </view>
    <emptyData
      :width="empty.width"
      :height="empty.height"
      :text="empty.text"
      :icon="empty.icon"
      :marginTop="empty.marginTop"
      v-if="list.length == 0"
    ></emptyData>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderTabIndex: 0,
      orderTabList: [
        {
          name: "消费明细",
        },
        {
          name: "充值明细",
        },
      ],
      cateTabIndex: 0,
      cateList: [
        {
          name: "网单",
        },
        {
          name: "店单",
        },
      ],
      empty: {
        width: 135,
        height: 134,
        text: "暂无数据",
        icon: "/image/emptyAddress.png",
        marginTop: 100,
      },
      //分页数据
      list: [],
      pageType: "",
      pageValue: "",
      page: 1,
      wangList: [],
    };
  },
  onLoad(e) {
    this.getList();
  },
  onReachBottom() {
    if (this.orderTabIndex == 0) {
      if (this.cateTabIndex == 0) {
        this.page++;
      }
      this.getList();
    } else {
      if (this.cateTabIndex == 0) {
        this.page++;
      }
      this.getList();
    }
  },
  methods: {
    goTo() {
      this.$util.redirectTo("/pages/balanceRule/balanceRule");
    },
    clickCateTab(e) {
      this.cateTabIndex = e.index;
      this.list = [];
      this.pageType = "";
      this.pageValue = "";
      this.page = 1;
      this.getList();
    },
    clickTab(e) {
      this.orderTabIndex = e.index;
      this.list = [];
      this.pageType = "";
      this.pageValue = "";
      this.page = 1;
      this.getList();
    },
    getList() {
      let data = {};
      let apiurl = "";

      if (this.orderTabIndex == 0) {
        if (this.cateTabIndex == 0) {
          data.page = this.page;
          data.page_size = 20;
          data.account_type = "balance";
          data.from_type = "order";
        } else {
          data.type = this.pageType;
          data.value = this.pageValue;
        }
      } else {
        if (this.cateTabIndex == 0) {
          data.page = this.page;
          data.page_size = 20;
          data.account_type = "balance";
          data.from_type = "memberrecharge";
        } else {
        }
      }

      if (this.orderTabIndex == 0) {
        if (this.cateTabIndex == 0) {
          apiurl = "/api/memberaccount/page";
        } else {
          apiurl = "/api/member/memberAccount";
        }
      } else {
        if (this.cateTabIndex == 0) {
          apiurl = "/api/memberaccount/page";
        } else {
          apiurl = "/api/member/memberRechare";
        }
      }
      this.$api.sendRequest({
        url: apiurl,
        data: data,
        success: (res) => {
          if (res.code == 0) {
            if (this.orderTabIndex == 0) {
              if (this.cateTabIndex == 0) {
                if (this.page == 1) this.list = [];
                this.list = [...this.list, ...res.data.list];
              } else {
                if (res.data) {
                  this.list = this.list.concat(res.data.result);
                  this.pageType = res.data.postBackParameter.parameterType;
                  this.pageValue = res.data.postBackParameter.parameterValue;
                }
              }
            } else {
              if (this.cateTabIndex == 0) {
                if (this.page == 1) this.list = [];
                this.list = [...this.list, ...res.data.list];
              } else {
                this.list = res.data;
              }

              console.log(this.list);
            }
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.record {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  margin: 24rpx 24rpx 0;
  .img {
    width: 86rpx;
    height: 86rpx;
    margin-right: 20rpx;
  }
}
.wenab {
  position: absolute;
  top: -6rpx;
  right: 20rpx;
  font-size: 40rpx;
}
</style>
